<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>树洞交友 - 筛选查询</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #3b82f6;
            --primary-light: #60a5fa;
            --primary-dark: #2563eb;
            --secondary: #ec4899;
            --text-primary: #111827;
            --text-secondary: #6b7280;
            --text-light: #9ca3af;
            --bg-light: #f9fafb;
            --bg-white: #ffffff;
            --border-light: #e5e7eb;
            --radius: 10px;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            border-bottom: 1px solid var(--border-light);
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .nav-title {
            font-size: 1.15rem;
            font-weight: 600;
            text-align: center;
            flex: 1;
        }
        
        .nav-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .nav-btn:hover {
            background-color: var(--bg-light);
            color: var(--primary);
        }
        
        /* 搜索和筛选容器 */
        .search-filter-container {
            background-color: var(--bg-white);
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-light);
        }
        
        /* 搜索栏 */
        .search-bar {
            margin-bottom: 12px;
        }
        
        .search-input-group {
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border: 1px solid var(--border-light);
            border-radius: 20px;
            font-size: 0.9rem;
            background-color: var(--bg-light);
            transition: var(--transition);
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary-light);
            background-color: white;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
        }
        
        /* 筛选工具栏 */
        .filter-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .filter-title {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }
        
        .filter-buttons {
            display: flex;
            gap: 8px;
        }
        
        .filter-btn {
            background: none;
            border: 1px solid var(--border-light);
            color: var(--text-secondary);
            padding: 4px 10px;
            border-radius: 14px;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: var(--transition);
        }
        
        .filter-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .filter-btn:hover:not(.active) {
            border-color: var(--primary-light);
            color: var(--primary);
        }
        
        /* 分类标签 */
        .category-tabs {
            background-color: var(--bg-white);
            padding: 8px 16px;
            overflow-x: auto;
            scrollbar-width: none;
            border-bottom: 1px solid var(--border-light);
        }
        
        .category-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .tabs-container {
            display: flex;
            gap: 12px;
            padding-bottom: 4px;
        }
        
        .tab-item {
            padding: 6px 14px;
            border-radius: 16px;
            font-size: 0.9rem;
            white-space: nowrap;
            background-color: var(--bg-light);
            color: var(--text-secondary);
            transition: var(--transition);
            cursor: pointer;
        }
        
        .tab-item.active {
            background-color: var(--primary);
            color: white;
        }
        
        .tab-item:hover {
            background-color: #e5e7eb;
        }
        
        .tab-item.active:hover {
            background-color: var(--primary-dark);
        }
        
        /* 高级筛选面板 */
        .advanced-filter {
            background-color: var(--bg-white);
            padding: 16px;
            border-bottom: 1px solid var(--border-light);
            display: none;
        }
        
        .advanced-filter.active {
            display: block;
        }
        
        .filter-section {
            margin-bottom: 16px;
        }
        
        .filter-section-title {
            font-size: 0.95rem;
            font-weight: 500;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .filter-option {
            padding: 6px 12px;
            background-color: var(--bg-light);
            border-radius: 14px;
            font-size: 0.85rem;
            color: var(--text-secondary);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .filter-option.active {
            background-color: var(--primary-light);
            color: white;
        }
        
        .filter-actions {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        
        .filter-action-btn {
            flex: 1;
            padding: 8px 0;
            border-radius: 6px;
            font-size: 0.9rem;
            transition: var(--transition);
            border: none;
        }
        
        .reset-btn {
            background-color: var(--bg-light);
            color: var(--text-secondary);
        }
        
        .apply-btn {
            background-color: var(--primary);
            color: white;
        }
        
        /* 结果统计 */
        .results-stats {
            padding: 10px 16px;
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
            font-size: 0.85rem;
            color: var(--text-secondary);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .sort-options {
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--primary);
            cursor: pointer;
        }
        
        /* 树洞列表 */
        .树洞-list {
            padding: 10px 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .树洞-item {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            padding: 16px;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }
        
        .树洞-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .user-info {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
        }
        
        .user-name {
            font-weight: 500;
            font-size: 0.95rem;
            margin-bottom: 2px;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: var(--text-light);
        }
        
        .post-content {
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 12px;
            color: var(--text-primary);
        }
        
        /* 图片容器 */
        .images-container {
            margin-bottom: 12px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .single-image {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .single-image img {
            width: 100%;
            aspect-ratio: 16/9;
            object-fit: cover;
        }
        
        .multiple-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
        }
        
        .multiple-images.three-images {
            grid-template-columns: repeat(3, 1fr);
        }
        
        .image-item {
            aspect-ratio: 1;
            overflow: hidden;
            position: relative;
        }
        
        .image-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .image-item:hover img {
            transform: scale(1.05);
        }
        
        .image-count {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
        }
        
        /* 标签 */
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .post-tag {
            padding: 3px 10px;
            background-color: var(--bg-light);
            border-radius: 12px;
            font-size: 0.8rem;
            color: var(--primary);
        }
        
        /* 操作栏 */
        .post-actions {
            display: flex;
            justify-content: space-around;
            padding-top: 8px;
            border-top: 1px solid var(--border-light);
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text-secondary);
            font-size: 0.85rem;
            background: none;
            border: none;
            padding: 6px 0;
            transition: var(--transition);
        }
        
        .action-btn:hover {
            color: var(--primary);
        }
        
        .action-btn.liked {
            color: var(--secondary);
        }
        
        /* 发布按钮 */
        .post-btn {
            position: fixed;
            bottom: 80px;
            right: 20px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            border: none;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            z-index: 998;
            transition: var(--transition);
        }
        
        .post-btn:hover {
            background-color: var(--primary-dark);
            transform: scale(1.05);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 65px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            text-decoration: none;
        }
        
        .nav-item i {
            font-size: 1.25rem;
            margin-bottom: 4px;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        /* 加载更多 */
        .load-more {
            margin: 16px 0;
            padding: 10px;
            text-align: center;
            color: var(--primary);
            font-size: 0.9rem;
            background-color: var(--bg-white);
            border-radius: var(--radius);
            border: 1px solid var(--border-light);
            transition: var(--transition);
        }
        
        .load-more:hover {
            background-color: var(--bg-light);
        }
        
        /* 空状态 */
        .empty-state {
            padding: 40px 20px;
            text-align: center;
            color: var(--text-secondary);
        }
        
        .empty-state i {
            font-size: 3rem;
            margin-bottom: 16px;
            color: var(--text-light);
        }
        
        .empty-state p {
            margin-bottom: 20px;
        }
        
        .empty-state button {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">树洞筛选</div>
        <button class="nav-btn">
            <i class="fas fa-cog"></i>
        </button>
    </div>
    
    <!-- 搜索和筛选容器 -->
    <div class="search-filter-container">
        <!-- 搜索栏 -->
        <div class="search-bar">
            <div class="search-input-group">
                <i class="fas fa-search search-icon"></i>
                <input type="text" class="search-input" placeholder="搜索关键词、标签或用户...">
            </div>
        </div>
        
        <!-- 筛选工具栏 -->
        <div class="filter-toolbar">
            <div class="filter-title">筛选条件</div>
            <div class="filter-buttons">
                <button class="filter-btn" id="textFilterBtn">
                    <i class="fas fa-align-left"></i> 纯文字
                </button>
                <button class="filter-btn" id="imageFilterBtn">
                    <i class="fas fa-image"></i> 有图片
                </button>
                <button class="filter-btn active" id="advancedFilterBtn">
                    <i class="fas fa-sliders"></i> 高级
                </button>
            </div>
        </div>
    </div>
    
    <!-- 高级筛选面板 -->
    <div class="advanced-filter" id="advancedFilterPanel">
        <div class="filter-section">
            <div class="filter-section-title">
                <i class="fas fa-clock"></i> 发布时间
            </div>
            <div class="filter-options">
                <div class="filter-option active">全部时间</div>
                <div class="filter-option">今天</div>
                <div class="filter-option">近3天</div>
                <div class="filter-option">近一周</div>
                <div class="filter-option">近一月</div>
            </div>
        </div>
        
        <div class="filter-section">
            <div class="filter-section-title">
                <i class="fas fa-map-marker-alt"></i> 距离范围
            </div>
            <div class="filter-options">
                <div class="filter-option active">不限</div>
                <div class="filter-option">1公里内</div>
                <div class="filter-option">3公里内</div>
                <div class="filter-option">5公里内</div>
                <div class="filter-option">10公里内</div>
            </div>
        </div>
        
        <div class="filter-section">
            <div class="filter-section-title">
                <i class="fas fa-heart"></i> 互动热度
            </div>
            <div class="filter-options">
                <div class="filter-option active">不限</div>
                <div class="filter-option">高点赞</div>
                <div class="filter-option">高评论</div>
                <div class="filter-option">最新发布</div>
            </div>
        </div>
        
        <div class="filter-section">
            <div class="filter-section-title">
                <i class="fas fa-user"></i> 用户类型
            </div>
            <div class="filter-options">
                <div class="filter-option active">全部用户</div>
                <div class="filter-option">关注的人</div>
                <div class="filter-option">附近的人</div>
                <div class="filter-option">认证用户</div>
            </div>
        </div>
        
        <div class="filter-actions">
            <button class="filter-action-btn reset-btn" id="resetFilterBtn">重置</button>
            <button class="filter-action-btn apply-btn" id="applyFilterBtn">应用筛选</button>
        </div>
    </div>
    
    <!-- 分类标签 -->
    <div class="category-tabs">
        <div class="tabs-container">
            <div class="tab-item active">全部</div>
            <div class="tab-item">情感</div>
            <div class="tab-item">兴趣</div>
            <div class="tab-item">职场</div>
            <div class="tab-item">学习</div>
            <div class="tab-item">游戏</div>
            <div class="tab-item">美食</div>
            <div class="tab-item">旅行</div>
            <div class="tab-item">摄影</div>
            <div class="tab-item">音乐</div>
            <div class="tab-item">电影</div>
        </div>
    </div>
    
    <!-- 结果统计 -->
    <div class="results-stats">
        <div>找到 248 条树洞</div>
        <div class="sort-options" id="sortOptions">
            排序: 推荐 <i class="fas fa-chevron-down"></i>
        </div>
    </div>
    
    <!-- 排序下拉菜单 (默认隐藏) -->
    <div class="dropdown-menu" id="sortDropdown" style="display: none; position: absolute; right: 16px; top: 310px; z-index: 100; background-color: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 120px;">
        <div class="dropdown-item" data-sort="recommend">推荐</div>
        <div class="dropdown-item" data-sort="latest">最新发布</div>
        <div class="dropdown-item" data-sort="hot">热门程度</div>
        <div class="dropdown-item" data-sort="commented">评论最多</div>
    </div>
    
    <!-- 树洞列表 -->
    <div class="树洞-list" id="树洞List">
        <!-- 无图树洞 -->
        <div class="树洞-item">
            <div class="user-info">
                <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="user-avatar">
                <div>
                    <div class="user-name">孤独的旅行者</div>
                    <div class="post-time">2小时前 · 距离3.2km</div>
                </div>
            </div>
            <div class="post-content">
                有没有喜欢独自旅行的朋友？我特别享受一个人在陌生城市漫步的感觉，不用迁就别人的节奏，可以完全按照自己的心意去探索。下个月打算去成都，有没有去过的朋友给点建议？
            </div>
            <div class="tags-container">
                <span class="post-tag">#独自旅行</span>
                <span class="post-tag">#成都</span>
                <span class="post-tag">#旅行建议</span>
            </div>
            <div class="post-actions">
                <button class="action-btn like-btn">
                    <i class="far fa-heart"></i>
                    <span>28</span>
                </button>
                <button class="action-btn comment-btn">
                    <i class="far fa-comment"></i>
                    <span>15</span>
                </button>
                <button class="action-btn share-btn">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </button>
                <button class="action-btn">
                    <i class="far fa-bookmark"></i>
                    <span>收藏</span>
                </button>
            </div>
        </div>
        
        <!-- 单图树洞 -->
        <div class="树洞-item">
            <div class="user-info">
                <img src="https://picsum.photos/id/237/100/100" alt="用户头像" class="user-avatar">
                <div>
                    <div class="user-name">咖啡爱好者</div>
                    <div class="post-time">5小时前 · 距离5.7km</div>
                </div>
            </div>
            <div class="post-content">
                今天尝试自己做手冲咖啡，第一次做感觉还不错！有没有同样喜欢咖啡的朋友？可以一起交流一下冲煮技巧~
            </div>
            <div class="images-container">
                <div class="single-image">
                    <img src="https://picsum.photos/id/431/800/450" alt="手冲咖啡">
                </div>
            </div>
            <div class="tags-container">
                <span class="post-tag">#咖啡</span>
                <span class="post-tag">#手冲</span>
                <span class="post-tag">#兴趣爱好</span>
            </div>
            <div class="post-actions">
                <button class="action-btn like-btn">
                    <i class="far fa-heart"></i>
                    <span>42</span>
                </button>
                <button class="action-btn comment-btn">
                    <i class="far fa-comment"></i>
                    <span>23</span>
                </button>
                <button class="action-btn share-btn">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </button>
                <button class="action-btn">
                    <i class="far fa-bookmark"></i>
                    <span>收藏</span>
                </button>
            </div>
        </div>
        
        <!-- 多图树洞 -->
        <div class="树洞-item">
            <div class="user-info">
                <img src="https://picsum.photos/id/342/100/100" alt="用户头像" class="user-avatar">
                <div>
                    <div class="user-name">美食探索家</div>
                    <div class="post-time">3天前 · 距离1.8km</div>
                </div>
            </div>
            <div class="post-content">
                周末在家尝试做了三道新菜式：番茄牛腩、蒜蓉粉丝蒸虾和麻婆豆腐，味道都还不错！有没有喜欢做饭的朋友，求交流食谱~
            </div>
            <div class="images-container">
                <div class="multiple-images three-images">
                    <div class="image-item">
                        <img src="https://picsum.photos/id/292/300/300" alt="番茄牛腩">
                    </div>
                    <div class="image-item">
                        <img src="https://picsum.photos/id/488/300/300" alt="蒜蓉粉丝蒸虾">
                    </div>
                    <div class="image-item">
                        <img src="https://picsum.photos/id/312/300/300" alt="麻婆豆腐">
                    </div>
                </div>
            </div>
            <div class="tags-container">
                <span class="post-tag">#美食</span>
                <span class="post-tag">#家常菜</span>
                <span class="post-tag">#烹饪</span>
            </div>
            <div class="post-actions">
                <button class="action-btn like-btn">
                    <i class="far fa-heart"></i>
                    <span>124</span>
                </button>
                <button class="action-btn comment-btn">
                    <i class="far fa-comment"></i>
                    <span>56</span>
                </button>
                <button class="action-btn share-btn">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </button>
                <button class="action-btn">
                    <i class="far fa-bookmark"></i>
                    <span>收藏</span>
                </button>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="load-more" id="loadMore">
            加载更多
        </div>
    </div>
    
    <!-- 发布按钮 -->
    <button class="post-btn" id="postBtn">
        <i class="fas fa-plus"></i>
    </button>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-comments"></i>
            <span>树洞</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="far fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 模拟树洞数据
        const morePosts = [
            {
                id: 4,
                user: {
                    name: "深夜读书馆",
                    avatar: "https://picsum.photos/id/24/100/100"
                },
                time: "2周前 · 距离8.3km",
                content: "最近在读《人类简史》，这本书真的太震撼了！作者的视角非常独特，把人类发展的历程讲得既深刻又有趣。有没有同样喜欢历史类书籍的朋友可以一起讨论？",
                images: [],
                tags: ["#读书", "#历史", "#人类简史"],
                likes: 67,
                comments: 28
            },
            {
                id: 5,
                user: {
                    name: "健身小白",
                    avatar: "https://picsum.photos/id/823/100/100"
                },
                time: "3周前 · 距离2.1km",
                content: "坚持健身一个月的成果，虽然变化不大，但感觉体能明显提升了！有没有健身大佬给点建议，接下来想增肌应该怎么练？",
                images: [
                    "https://picsum.photos/id/176/800/450"
                ],
                tags: ["#健身", "#增肌", "#自律"],
                likes: 93,
                comments: 47
            },
            {
                id: 6,
                user: {
                    name: "摄影初学者",
                    avatar: "https://picsum.photos/id/91/100/100"
                },
                time: "1周前 · 距离6.5km",
                content: "上周去公园拍的一组照片，第一次尝试人像摄影，用的是入门级相机，希望各位大神能给点指导意见，非常感谢！",
                images: [
                    "https://picsum.photos/id/64/300/300",
                    "https://picsum.photos/id/65/300/300",
                    "https://picsum.photos/id/76/300/300"
                ],
                tags: ["#摄影", "#人像", "#新手"],
                likes: 89,
                comments: 42
            }
        ];
        
        // 当前筛选条件
        const currentFilters = {
            category: "全部",
            hasImage: null, // null: 不限, true: 有图, false: 纯文字
            timeRange: "全部时间",
            distance: "不限",
            popularity: "不限",
            userType: "全部用户",
            sortBy: "recommend",
            searchKeyword: ""
        };
        
        // DOM元素
        const likeBtns = document.querySelectorAll(".like-btn");
        const commentBtns = document.querySelectorAll(".comment-btn");
        const shareBtns = document.querySelectorAll(".share-btn");
        const tabItems = document.querySelectorAll(".tab-item");
        const loadMoreBtn = document.getElementById("loadMore");
        const postBtn = document.getElementById("postBtn");
        const 树洞List = document.getElementById("树洞List");
        const backBtn = document.getElementById("backBtn");
        const textFilterBtn = document.getElementById("textFilterBtn");
        const imageFilterBtn = document.getElementById("imageFilterBtn");
        const advancedFilterBtn = document.getElementById("advancedFilterBtn");
        const advancedFilterPanel = document.getElementById("advancedFilterPanel");
        const filterOptions = document.querySelectorAll(".filter-option");
        const resetFilterBtn = document.getElementById("resetFilterBtn");
        const applyFilterBtn = document.getElementById("applyFilterBtn");
        const sortOptions = document.getElementById("sortOptions");
        const sortDropdown = document.getElementById("sortDropdown");
        const searchInput = document.querySelector(".search-input");
        const resultsStats = document.querySelector(".results-stats");
        
        // 初始化事件监听
        function init() {
            setupEventListeners();
        }
        
        // 设置事件监听
        function setupEventListeners() {
            // 点赞功能
            likeBtns.forEach(btn => {
                btn.addEventListener("click", handleLike);
            });
            
            // 评论按钮
            commentBtns.forEach(btn => {
                btn.addEventListener("click", handleComment);
            });
            
            // 分享按钮
            shareBtns.forEach(btn => {
                btn.addEventListener("click", handleShare);
            });
            
            // 分类标签切换
            tabItems.forEach(tab => {
                tab.addEventListener("click", () => {
                    tabItems.forEach(t => t.classList.remove("active"));
                    tab.classList.add("active");
                    currentFilters.category = tab.textContent;
                    applyFilters();
                });
            });
            
            // 加载更多
            loadMoreBtn.addEventListener("click", loadMorePosts);
            
            // 发布按钮
            postBtn.addEventListener("click", () => {
                alert("跳转到发布树洞页面");
            });
            
            // 返回按钮
            backBtn.addEventListener("click", () => {
                history.back();
            });
            
            // 文本/图片筛选按钮
            textFilterBtn.addEventListener("click", () => {
                textFilterBtn.classList.add("active");
                imageFilterBtn.classList.remove("active");
                advancedFilterBtn.classList.remove("active");
                advancedFilterPanel.classList.remove("active");
                currentFilters.hasImage = false;
                applyFilters();
            });
            
            imageFilterBtn.addEventListener("click", () => {
                imageFilterBtn.classList.add("active");
                textFilterBtn.classList.remove("active");
                advancedFilterBtn.classList.remove("active");
                advancedFilterPanel.classList.remove("active");
                currentFilters.hasImage = true;
                applyFilters();
            });
            
            // 高级筛选按钮
            advancedFilterBtn.addEventListener("click", () => {
                advancedFilterBtn.classList.toggle("active");
                advancedFilterPanel.classList.toggle("active");
                if (advancedFilterBtn.classList.contains("active")) {
                    textFilterBtn.classList.remove("active");
                    imageFilterBtn.classList.remove("active");
                    currentFilters.hasImage = null;
                }
            });
            
            // 筛选选项点击
            filterOptions.forEach(option => {
                option.addEventListener("click", () => {
                    // 同一组内只能选中一个
                    const parent = option.parentElement;
                    parent.querySelectorAll(".filter-option").forEach(opt => {
                        opt.classList.remove("active");
                    });
                    option.classList.add("active");
                    
                    // 更新当前筛选条件
                    const sectionTitle = option.closest(".filter-section").querySelector(".filter-section-title").textContent.trim();
                    switch(sectionTitle) {
                        case "发布时间":
                            currentFilters.timeRange = option.textContent;
                            break;
                        case "距离范围":
                            currentFilters.distance = option.textContent;
                            break;
                        case "互动热度":
                            currentFilters.popularity = option.textContent;
                            break;
                        case "用户类型":
                            currentFilters.userType = option.textContent;
                            break;
                    }
                });
            });
            
            // 重置筛选
            resetFilterBtn.addEventListener("click", () => {
                // 重置所有筛选选项
                document.querySelectorAll(".filter-option").forEach(option => {
                    option.classList.remove("active");
                    if (option.textContent === "全部时间" || 
                        option.textContent === "不限" || 
                        option.textContent === "全部用户") {
                        option.classList.add("active");
                    }
                });
                
                // 重置当前筛选条件
                currentFilters.timeRange = "全部时间";
                currentFilters.distance = "不限";
                currentFilters.popularity = "不限";
                currentFilters.userType = "全部用户";
            });
            
            // 应用筛选
            applyFilterBtn.addEventListener("click", applyFilters);
            
            // 排序选项
            sortOptions.addEventListener("click", (e) => {
                e.stopPropagation();
                sortDropdown.style.display = sortDropdown.style.display === "block" ? "none" : "block";
            });
            
            // 点击其他地方关闭排序下拉菜单
            document.addEventListener("click", (e) => {
                if (!sortOptions.contains(e.target) && !sortDropdown.contains(e.target)) {
                    sortDropdown.style.display = "none";
                }
            });
            
            // 排序选项点击
            document.querySelectorAll(".dropdown-item").forEach(item => {
                item.addEventListener("click", () => {
                    currentFilters.sortBy = item.getAttribute("data-sort");
                    sortOptions.innerHTML = `排序: ${item.textContent} <i class="fas fa-chevron-down"></i>`;
                    sortDropdown.style.display = "none";
                    applyFilters();
                });
            });
            
            // 搜索输入
            searchInput.addEventListener("input", (e) => {
                currentFilters.searchKeyword = e.target.value.trim();
                // 延迟搜索，避免输入时频繁触发
                clearTimeout(window.searchTimeout);
                window.searchTimeout = setTimeout(applyFilters, 500);
            });
        }
        
        // 处理点赞
        function handleLike() {
            const icon = this.querySelector("i");
            const countEl = this.querySelector("span");
            let count = parseInt(countEl.textContent);
            
            if (icon.classList.contains("far")) {
                icon.classList.remove("far");
                icon.classList.add("fas");
                this.classList.add("liked");
                countEl.textContent = count + 1;
            } else {
                icon.classList.remove("fas");
                icon.classList.add("far");
                this.classList.remove("liked");
                countEl.textContent = count - 1;
            }
        }
        
        // 处理评论
        function handleComment() {
            const postItem = this.closest(".树洞-item");
            const userName = postItem.querySelector(".user-name").textContent;
            alert(`查看 ${userName} 的树洞评论`);
        }
        
        // 处理分享
        function handleShare() {
            alert("分享功能：可分享到微信、QQ、微博等");
        }
        
        // 应用筛选条件
        function applyFilters() {
            showLoading();
            
            // 模拟筛选加载延迟
            setTimeout(() => {
                // 在实际应用中，这里会根据currentFilters向服务器请求数据
                // 这里仅做演示，显示筛选条件
                console.log("应用筛选条件:", currentFilters);
                
                // 更新结果统计
                const randomCount = Math.floor(Math.random() * 100) + 50; // 随机生成50-150之间的数字
                resultsStats.querySelector("div:first-child").textContent = `找到 ${randomCount} 条树洞`;
                
                hideLoading();
            }, 800);
        }
        
        // 加载更多树洞
        function loadMorePosts() {
            showLoading();
            
            setTimeout(() => {
                morePosts.forEach(post => {
                    const postElement = createPostElement(post);
                    树洞List.insertBefore(postElement, loadMoreBtn);
                    
                    // 为新添加的元素绑定事件
                    const newLikeBtn = postElement.querySelector(".like-btn");
                    const newCommentBtn = postElement.querySelector(".comment-btn");
                    const newShareBtn = postElement.querySelector(".share-btn");
                    
                    newLikeBtn.addEventListener("click", handleLike);
                    newCommentBtn.addEventListener("click", handleComment);
                    newShareBtn.addEventListener("click", handleShare);
                });
                
                hideLoading();
            }, 1000);
        }
        
        // 创建树洞元素
        function createPostElement(post) {
            const postElement = document.createElement("div");
            postElement.className = "树洞-item";
            
            // 构建图片容器HTML
            let imagesHtml = "";
            if (post.images.length > 0) {
                if (post.images.length === 1) {
                    imagesHtml = `
                        <div class="images-container">
                            <div class="single-image">
                                <img src="${post.images[0]}" alt="树洞图片">
                            </div>
                        </div>
                    `;
                } else if (post.images.length <= 3) {
                    imagesHtml = `<div class="images-container">
                        <div class="multiple-images ${post.images.length === 3 ? 'three-images' : ''}">`;
                    
                    post.images.forEach((img, index) => {
                        imagesHtml += `
                            <div class="image-item">
                                <img src="${img}" alt="树洞图片 ${index + 1}">
                            </div>
                        `;
                    });
                    
                    imagesHtml += `</div></div>`;
                } else {
                    // 多于3张图片时显示3张+数量
                    imagesHtml = `<div class="images-container">
                        <div class="multiple-images three-images">`;
                    
                    post.images.slice(0, 3).forEach((img, index) => {
                        if (index === 2) {
                            imagesHtml += `
                                <div class="image-item">
                                    <img src="${img}" alt="树洞图片 ${index + 1}">
                                    <div class="image-count">+${post.images.length - 3}</div>
                                </div>
                            `;
                        } else {
                            imagesHtml += `
                                <div class="image-item">
                                    <img src="${img}" alt="树洞图片 ${index + 1}">
                                </div>
                            `;
                        }
                    });
                    
                    imagesHtml += `</div></div>`;
                }
            }
            
            // 构建标签HTML
            let tagsHtml = "";
            if (post.tags && post.tags.length > 0) {
                tagsHtml = `<div class="tags-container">`;
                post.tags.forEach(tag => {
                    tagsHtml += `<span class="post-tag">${tag}</span>`;
                });
                tagsHtml += `</div>`;
            }
            
            // 组装整个树洞元素HTML
            postElement.innerHTML = `
                <div class="user-info">
                    <img src="${post.user.avatar}" alt="用户头像" class="user-avatar">
                    <div>
                        <div class="user-name">${post.user.name}</div>
                        <div class="post-time">${post.time}</div>
                    </div>
                </div>
                <div class="post-content">
                    ${post.content}
                </div>
                ${imagesHtml}
                ${tagsHtml}
                <div class="post-actions">
                    <button class="action-btn like-btn">
                        <i class="far fa-heart"></i>
                        <span>${post.likes}</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>${post.comments}</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn">
                        <i class="far fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            `;
            
            return postElement;
        }
        
        // 显示加载状态
        function showLoading() {
            // 创建加载指示器
            const loadingEl = document.createElement("div");
            loadingEl.className = "load-more";
            loadingEl.id = "tempLoading";
            loadingEl.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            
            // 替换加载更多按钮
            树洞List.replaceChild(loadingEl, loadMoreBtn);
        }
        
        // 隐藏加载状态
        function hideLoading() {
            const tempLoading = document.getElementById("tempLoading");
            if (tempLoading) {
                树洞List.replaceChild(loadMoreBtn, tempLoading);
            }
        }
        
        // 初始化页面
        document.addEventListener("DOMContentLoaded", init);
    </script>
</body>
</html>
